<template>
  <div class="bigScreen">
    <scale-box>
      <div class="bg-home">
        <header-view></header-view>
        <div class="flex-row" style="position:relative">
          <div class="app-left-view flex-col">
            <tjgk> </tjgk>
            <clgl style="margin-top:20px"></clgl>
            <pszsj style="margin-top:26px"> </pszsj>
            <qlsl style="margin-top:30px"></qlsl>
          </div>
          <div class="app-center-view">
            <map-view></map-view>
            <div class="togpsbtn">
              <div class="btnStyle" @click="openGps">车辆轨迹管理</div>

            </div>
            <modal ref="gpsview" type="info">
              <div id="gpsview-model" class="gpsview-model">
                <iframe src="https://www.wdczn.cn" frameborder="0" style="width: 100%;height: 100%;"></iframe>
              </div>

            </modal>
            <!-- <insurance-view></insurance-view> -->
          </div>
          <div class="app-right-view flex-col align-center">
            <jrzy></jrzy>
            <gyczt style="margin-top:45px"></gyczt>
            <fqxs style="margin-top:40px"></fqxs>
            <!-- <danager-view></danager-view>
            <service-view></service-view> -->
          </div>
        </div>
        <!-- <footer-view></footer-view> -->
      </div>

    </scale-box>
  </div>
</template>
<script>
import ScaleBox from './module/ScaleBox.vue';
import HeaderView from './module/HeaderView.vue'

import tjgk from './module/left/tjgk.vue';
import clgl from './module/left/clgl.vue';
import Pszsj from './module/left/pszsj.vue';
import Qlsl from './module/left/qlsl.vue';
import jrzy from './module/right/jrzy.vue';
import Gyczt from './module/right/gyczt.vue';
import Fqxs from './module/right/fqxs.vue';
import MapView from './module/map/MapView.vue';
import Modal from '@/components/Modal.vue';
export default {
  name: 'HomeView',
  components: {
    ScaleBox,
    HeaderView,
    tjgk,
    clgl,
    Pszsj,
    Qlsl,
    jrzy,
    Gyczt,
    Fqxs,
    MapView,
    Modal
  },
  methods: {
    openGps () {
      // this.$refs.gpsview.info();
      let url = 'https://www.wdczn.cn'
      window.open(url)
    }
  }
}
</script>
<style scoped>
.gpsview-model {
  width: 100%;
  height: 800px;
}
</style>
<style>
.togpsbtn {
  color: #fff;
  font-size: 30px;
  display: flex;
  justify-content: center;
  align-items: center;


}

.btnStyle {
  background: rgba(202, 53, 7, .7);
  padding: 10px;
  text-shadow: 0px 0px 8px #333;
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0px 0px 8px #fff;
}

.bg-home {
  background-image: url('@/assets/images/bg.png');
  background-size: 100% 100%;
  width: 100%;
  height: 1080px;
  position: relative;
  /* background: linear-gradient(180deg, #01369c, #164dba 56%, #00236a); */
}

.app-left-view {
  width: 40%;

  position: absolute;
  left: 24px;
}

.app-center-view {
  position: absolute;
  left: 550px;
  top: 100px;
  width: 848px;
  height: 810px;
}

.app-right-view {
  width: 23%;
  position: absolute;
  right: 24px;
}</style>
